<Ul class=sidebar-nav>

Компоненты Bootstrap

Последнее обновление: 31.10.2015

Bootstrap имеет ряд компонентов, которые не сводятся к стандартным кнопкам или текстовым полям, а представляют более сложные элементы. Полный список компонентов Bootstrap можно найти на официальной странице проекта http://getbootstrap.com/components/. Рассмотрим вкратце некоторые из них.

Навигационные панели

Первый компонент Bootstrap, с которым мы сталкиваемся в проекте, это навигационная панель. Данный компонент располагается на мастер-странице _Layout:

<div> <div> <div> <button type="button" data-toggle="collapse" data-target=".navbar-collapse"> <span></span> <span></span> <span></span> </button> @Html.ActionLink("Application name", "Index", "Home", null, new { @class = "navbar-brand" }) </div> <div> <ul> <li>@Html.ActionLink("Home", "Index", "Home")</li> <li>@Html.ActionLink("About", "About", "Home")</li> <li>@Html.ActionLink("Contact", "Contact", "Home")</li> </ul> </div> </div> </div>

И даже если мы сузим границы веб-браузера или запустим сайт на мобильном устройстве, то мы увидим, что панель навигации остается достаточно функциональной:

Компонент представляет класс navbar. Чтобы панель была фиксирована по верху страницы, используется также класс navbar-fixed-top. Если бы мы, наоборот, захотели фиксировать панель по низу, то в этом случае использовали бы класс navbar-fixed-bottom

И также в объявлении блока навигации используется класс navbar-inverse, который инвертирует цвета по умолчанию. Вместо этого класса мы могли бы использовать navbar-default, тогда в этом случае у нас бы было меню стандартных светлых тонов.

Для создания ссылок навигации применяется класс nav. Bootstrap представляет несколько классов для оформления ссылок навигации. По умолчанию используется класс navbar-nav, но мы можем использовать и другие возможности.

Для создания навигации по типу вкладок применяется класс nav-tabs. Так, например следующее меню:

<ul> <li class ="active">@Html.ActionLink("Home", "Index", "Home")</li> <li>@Html.ActionLink("About", "About", "Home")</li> <li>@Html.ActionLink("Contact", "Contact", "Home")</li> </ul>

даст такой эффект:

Еще один вариант создания панели ссылок представляет класс nav-pills:

<ul> <li class ="active">@Html.ActionLink("Home", "Index", "Home")</li> <li>@Html.ActionLink("About", "About", "Home")</li> <li>@Html.ActionLink("Contact", "Contact", "Home")</li> </ul>

А комбинируя классы nav-pills и nav-stacked, мы можем создать вертикальное меню:

Пагинация

Класс pagination позволяет создать панель ссылок в виде постраничной навигации:

Заглавия

Для создания ссылок заголовков применяется класс breadcrumb:

<ul> <li class ="active">@Html.ActionLink("Home", "Index", "Home")</li> <li>@Html.ActionLink("About", "About", "Home")</li> <li>@Html.ActionLink("Contact", "Contact", "Home")</li> </ul>

Кнопки

Для создания кнопок Bootstrap имеет класс btn. Как правило, кнопки офрмляются в группу с помощью класса btn-group:

<div role="group"> <button type="button">Left</button> <button type="button">Middle</button> <button type="button">Right</button> </div>

Кнопка с выпадающим списком

Для создания выпадающего списка по примеру элемента нам надо использовать кнопку вместе со списком, который должен иметь класс dropdown-menu:

<div> <button type="button" data-toggle="dropdown"> Язык программирования <span></span> </button> <ul role="menu"> <li><a href="#">JavaScript</a></li> <li><a href="#">C#</a></li> <li><a href="#">VB.NET</a></li> <li></li> <li><a href="#">Java</a></li> </ul> </div>

Метки

Для оформления кусков текста в качестве меток мы можем использовать класс label. Также мы можем использовать дополнительные классы меток, чтобы конкретизировать тип сообщения:

<span>Default</span> <span>Primary</span> <span>Success</span> <span>Info</span> <span>Warning</span> <span>Danger</span>

Похожую функциональность предлагает класс alert:

<div>Задача успешно завершена</div> <div>Дополнительная информация</div> <div>Внимание!</div> <div>Опасно!</div>

Это только некоторые компоненты, которые предлагает Bootstrap. Но уже по ним можно увидеть, что Bootstrap довольно гибок, и даже сложные по структуре компоненты может легко адаптировать и приспособить под конкретные устройства.

metanit.com

Навигационная панель · Bootstrap на русском

Навигационная панель является простой оболочкой для позиционирования брендинг, навигация и другие элементы в заголовке краткое навигации. Это легко расширяемый и, с помощью нашего плагина крах, его можно легко интегрировать контент закадровый.

Содержание

Основы

Вот что вы должны знать перед началом работы с навигационной панелью:

Navbars требуют накрутка .navbar и цветовая схема.
Navbars и их содержание изменчивый по умолчанию. Используйте опционально контейнеры для ограничения их ширины.
Используйте .pull-*-left и .pull-*-right чтобы быстро выровнять компоненты.
Обеспечить доступность с помощью <nav> элемент или, если использовать более общий элемент, например <div> добавить role="navigation" для каждой панели, чтобы однозначно идентифицировать его в качестве ориентира регион для пользователей вспомогательных технологий.

Поддерживает содержимого

Navbars оснащены встроенной поддержкой для нескольких компонентов. Смешивать и сочетать из следующих настроек:

.navbar-brand для Вашей компании, продукта или название проекта
.navbar-nav для полной высоты и облегченная навигация (включая поддержку для раскрывающихся списков)
.navbar-toggler для использования с нашими плагина крах и других навигация переключение поведения.

Вот пример для всех вложенных компонентов, включенных по умолчанию, светлых панелей:

<nav> <a href="#">Navbar</a> <ul> <li> <a href="#">Home <span>(current)</span></a> </li> <li> <a href="#">Features</a> </li> <li> <a href="#">Pricing</a> </li> <li> <a href="#">About</a> </li> </ul> <form> <input type="text" placeholder="Search"> <button type="submit">Search</button> </form> </nav>

Бренд

.navbar-brand могут быть применены к большинству элементов, но якорь лучше всего работает в качестве некоторых элементов может потребоваться служебные классы и пользовательские стили.

<nav> <a href="#">Navbar</a> </nav> <nav> <h2>Navbar</h2> </nav>

Nav

Навигации навигации похожа на наших регулярных навигация вариантов—использовать .nav базового класса с модификатором, чтобы достигнуть определенного взгляда. В данном случае вы хотите .nav.navbar-nav.

<nav> <ul> <li> <a href="#">Home <span>(current)</span></a> </li> <li> <a href="#">Features</a> </li> <li> <a href="#">Pricing</a> </li> <li> <a href="#">About</a> </li> </ul> </nav>

И поскольку мы используем классы для наших навигаций, вы можете избежать на основе списка подходом целиком и полностью, если вам нравится.

<nav> <div> <a href="#">Home <span>(current)</span></a> <a href="#">Features</a> <a href="#">Pricing</a> <a href="#">About</a> </div> </nav>

Цветовые схемы

Темы оформления панели навигации никогда не было проще благодаря сочетанию простого ссылке цвет модификатором класса и background-color утилиты. Иначе говоря, вы укажете светлый или темный и применить Цвет фона.

Вот некоторые примеры, чтобы показать что мы имеем в виду.

Контейнеры

Хотя это не требуется, вы можете обернуть навигации в .container, чтобы центр его на странице или добавить в один только центр Содержание фиксированный или статический топ navbar.

<div> <nav> <a href="#">Navbar</a> </nav> </div> <nav> <div> <a href="#">Navbar</a> </div> </nav>

Размещение

Navbars можно статически (поведение по умолчанию), статический без скругленных углов или крепится к верхней или нижней части области просмотра.

<nav> <a href="#">Full width</a> </nav> <nav> <a href="#">Fixed top</a> </nav> <nav> <a href="#">Fixed bottom</a> </nav>

Складной содержания

Наш плагин развал позволяет использовать <button> или <a> для переключения скрытый контент.

☰

Collapsed content

Toggleable via the navbar brand.

<nav> <button type="button" data-toggle="collapse" data-target="#exCollapsingNavbar" aria-controls="exCollapsingNavbar" aria-expanded="false" aria-label="Toggle navigation"> ☰ </button> <div> <div> <h5>Collapsed content</h5> <span>Toggleable via the navbar brand.</span> </div> </div> </nav>

Для более сложных моделей навигации, как те используемые в Bootstrap v3, используйте .navbar-toggleable-* классы в сочетании с .navbar-toggler. Эти классы пересилить aдаптивный утилит, чтобы показать навигацию только тогда, когда содержание должно быть показано.

<nav> <button type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2" aria-controls="exCollapsingNavbar2" aria-expanded="false" aria-label="Toggle navigation"> ☰ </button> <div> <a href="#">Responsive navbar</a> <ul> <li> <a href="#">Home <span>(current)</span></a> </li> <li> <a href="#">Features</a> </li> <li> <a href="#">Pricing</a> </li> <li> <a href="#">About</a> </li> </ul> </div> </nav>

getbootstrap.ru

Компоненты

Навигационная панель - это оболочка, которая позиционирует брендинг, навигацию и другие элементы в хедере. Он легко расширяется и, благодаря нашему плагину Collapse, может легко интегрировать адаптивное поведение.

Содержание

Как это работает

Вот что вам необходимо знать перед началом работы с навигационной панелью:

Навигационная панель требует обертывания .navbar с .navbar-toggleable-* for responsive collapsing и классов цветовой схемы.
Навигационные панели и их контент по умолчанию подвижные. Используйте дополнительные контейнеры, чтобы ограничить их горизонтальную ширину.
Навигационные панели и их содержимое построены с помощью flexbox, что обеспечивает легкость выравнивания через классы утилиты.
Навигационные панели по умолчанию адаптивны, но вы можете легко модифицировать их, чтобы изменить это. Адаптивное поведение зависит от нашего плагина Collapse JavaScript.
Обеспечьте доступность с помощью элемента <nav> или, используя более общий элемент, такой как <div>, добавьте role="navigation" в каждую навигационную панель, чтобы явно определить ее как ориентир для пользователей ассистивных технологий.

Ознакомьтесь с примером и списком поддерживаемых подкомпонентов.

Поддерживаемый контент

Навигационные панели поставляются со встроенной поддержкой нескольких подкомпонентов. При необходимости выберите один из следующих вариантов:

.navbar-brand для вашей компании, продукта или названия проекта.
.navbar-nav для полноразмерной и облегченной навигации (включая поддержку выпадающих списков).
.navbar-toggler для использования с нашим collapse плагином и другими режимами переключения навигации.
.form-inline для любых элементов управления и действий.
.navbar-text для добавления вертикально центрированных строк текста.
.collapse.navbar-collapse для группировки и скрытия содержимого навигационной панели от родительской точкой останова.

Ниже приведен пример всех подкомпонентов, включенных в адаптивную навигационную панель, которая автоматически свертывается в точке останова md.

<nav> <button type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span></span> </button> <a href="#">Navbar</a> <div> <ul> <li> <a href="#">Home <span>(current)</span></a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#">Disabled</a> </li> </ul> <form> <input type="text" placeholder="Search"> <button type="submit">Search</button> </form> </div> </nav>

Brand

.navbar-brand может быть применена к большинству элементов, но якорь лучше всего работает, поскольку некоторым элементам могут потребоваться классы утилит или пользовательские стили.

<nav> <a href="#">Navbar</a> </nav>  <nav> <h2>Navbar</h2> </nav>

Добавление изображений в .navbar-brand вероятно, всегда требует пользовательские стили или утилиты для правильного размера. Ниже представлены несколько примеров для демонстрации.

<nav> <a href="#"> <img src="http://bootstrap-doc.ru//assets/brand/bootstrap-solid.svg" alt=""> </a> </nav>  <nav> <a href="#"> <img src="http://bootstrap-doc.ru//assets/brand/bootstrap-solid.svg" alt=""> Bootstrap </a> </nav>

Навигационные ссылки навигационной панели строятся на наших опциях .nav со своим собственным классом-модификатором и требуют использования toggler классов для правильного адаптивного дизайна. Навигация в навигационной панели также будет расти, чтобы занять как можно больше горизонтального пространства, чтобы обеспечить безопасное выравнивание содержимого навигационной панели.

Активные состояния - с .active - для указания текущей страницы могут быть применены напрямую к .nav-link или их непосредственным родительским .nav-item.

<nav> <button type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span></span> </button> <a href="#">Navbar</a> <div> <ul> <li> <a href="#">Home <span>(current)</span></a> </li> <li> <a href="#">Features</a> </li> <li> <a href="#">Pricing</a> </li> <li> <a href="#">Disabled</a> </li> </ul> </div> </nav>

И поскольку мы используем классы для наших навигаций, вы можете полностью избежать использования подхода, основанного на списках, если хотите.

<nav> <button type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span></span> </button> <a href="#">Navbar</a> <div> <div> <a href="#">Home <span>(current)</span></a> <a href="#">Features</a> <a href="#">Pricing</a> <a href="#">Disabled</a> </div> </div> </nav>

Вы также можете использовать выпадающие списки в вашей навигации навигационной панели. Для раскрывающихся меню требуется обернуть элемент для позиционирования, поэтому обязательно используйте отдельные и вложенные элементы для .nav-item и .nav-link, как показано ниже.

<nav> <button type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span></span> </button> <a href="#">Navbar</a> <div> <ul> <li> <a href="#">Home <span>(current)</span></a> </li> <li> <a href="#">Features</a> </li> <li> <a href="#">Pricing</a> </li> <li> <a href="http://example.com" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown link </a> <div aria-labelledby="navbarDropdownMenuLink"> <a href="#">Action</a> <a href="#">Another action</a> <a href="#">Something else here</a> </div> </li> </ul> </div> </nav>

Формы

Разместите различные элементы управления формы и компоненты в навигационную панель с помощью .form-inline.

<nav> <form> <input type="text" placeholder="Search"> <button type="submit">Search</button> </form> </nav>

При необходимости совместите содержимое своих встроенных форм с утилитами.

<nav> <a>Navbar</a> <form> <input type="text" placeholder="Search"> <button type="submit">Search</button> </form> </nav>

Группы входных данных также работают:

В этих формах навигационной панели также поддерживаются различные кнопки. Это также отличное напоминание о том, что утилиты выравнивания по вертикали могут использоваться для выравнивания элементов разных размеров.

Main button Smaller button

<nav> <form> <button type="button">Main button</button> <button type="button">Smaller button</button> </form> </nav>

Текст

Навигационная панель может содержать биты текста с помощью .navbar-text. Этот класс регулирует вертикальное выравнивание и горизонтальное расстояние для строк текста.

Navbar text with an inline element

<nav> <span> Navbar text with an inline element </span> </nav>

При необходимости совместите их с другими компонентами и утилитами.

<nav> <button type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation"> <span></span> </button> <a href="#">Navbar w/ text</a> <div> <ul> <li> <a href="#">Home <span>(current)</span></a> </li> <li> <a href="#">Features</a> </li> <li> <a href="#">Pricing</a> </li> </ul> <span> Navbar text with an inline element </span> </div> </nav>

Цветовые схемы

Theming для навигационной панели никогда не была проще, благодаря сочетанию тематических классов и утилит background-color. Выберайте из .navbar-light для использования со светлыми цветами фона, или .navbar-inverse для темных цветов фона. Затем, настройте с помощью .bg-* утилиты.

Контейнеры

Хотя это и необязательно, вы можете обернуть навигационную панель в .container чтобы центрировать ее на странице или добавить один внутри, чтобы центрировать содержимое фиксированного или статического верха навигационной панели.

<div> <nav> <a href="#">Navbar</a> </nav> </div>

Когда контейнер находится в вашей навигационной панели, его горизонтальное заполнение удаляется в точках останова ниже указанного вами класса .navbar-toggleable-*. Это гарантирует, что мы не дублируем излишнее заполнение на небольших экранах, когда ваша навигационная панель свернута.

<nav> <div> <a href="#">Navbar</a> </div> </nav>

Размещение

Используйте наши утилиты для размещения навигационных панелей в нестатических позициях. Выберите один из следующих вариантов: фиксированная сверху, фиксированная снизу или прикрепленная к верхней части. Обратите внимание, что position: sticky, используемый для .sticky-top, поддерживается не в каждом браузере.

<nav> <a href="#">Full width</a> </nav> <nav> <a href="#">Fixed top</a> </nav> <nav> <a href="#">Fixed bottom</a> </nav> <nav> <a href="#">Sticky top</a> </nav>

Адаптивное поведение

Навигационная панель может использовать классы .navbar-toggler, .navbar-collapse и .navbar-toggleable-* для изменения, когда их содержимое сжимается за кнопкой. В сочетании с другими утилитами вы можете легко выбирать, когда показывать или скрывать определенные элементы.

Тогглер

Тогглеры навигационной панели можно выравнивать влево или вправо с помощью модификаторов .navbar-toggler-left или .navbar-toggler-right. Они абсолютно позиционированы в навигационной панели, чтобы избежать вмешательства в свернутом состоянии. Вы также можете использовать свои собственные стили для позиционирования тогглеров. Ниже приведены примеры различных стилей.

При отсутствии .navbar-brand, показанного в нижней точке останова:

<nav> <button type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"> <span></span> </button> <div> <a href="#">Hidden brand</a> <ul> <li> <a href="#">Home <span>(current)</span></a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#">Disabled</a> </li> </ul> <form> <input type="text" placeholder="Search"> <button type="submit">Search</button> </form> </div> </nav>

With a brand name shown on the left and toggler on the right:

<nav> <button type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation"> <span></span> </button> <a href="#">Navbar</a> <div> <ul> <li> <a href="#">Home <span>(current)</span></a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#">Disabled</a> </li> </ul> <form> <input type="text" placeholder="Search"> <button type="submit">Search</button> </form> </div> </nav>

Внешний контент

Иногда вы хотите использовать collapse плагин для запуска скрытого контента в другом месте страницы. Поскольку наш плагин работает с id и data-target matching, это легко сделать!

Collapsed content

Toggleable via the navbar brand.

<div> <div> <div> <h5>Collapsed content</h5> <span>Toggleable via the navbar brand.</span> </div> </div> <nav> <button type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation"> <span></span> </button> </nav> </div>

bootstrap-doc.ru

Bootstrap sidebar navigation component (Live demo)

<style>

@import "http://designmodo.github.io/Flat-UI/dist/css/flat-ui.min.css";

@import "https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css";

@import "https://daneden.github.io/animate.css/animate.min.css";

/*-------------------------------*/

/* VARIABLES */

/*-------------------------------*/

body {

position: relative;

overflow-x: hidden;

}

body,

html {

height: 100%;

background-color: #583e7e;

}

.nav .open > a {

background-color: transparent;

}

.nav .open > a:hover {

background-color: transparent;

}

.nav .open > a:focus {

background-color: transparent;

}

/*-------------------------------*/

/* Wrappers */

/*-------------------------------*/

#wrapper {

-moz-transition: all 0.5s ease;

-o-transition: all 0.5s ease;

-webkit-transition: all 0.5s ease;

padding-left: 0;

transition: all 0.5s ease;

}

#wrapper.toggled {

padding-left: 220px;

}

#wrapper.toggled #sidebar-wrapper {

width: 220px;

}

#wrapper.toggled #page-content-wrapper {

margin-right: -220px;

position: absolute;

}

#sidebar-wrapper {

-moz-transition: all 0.5s ease;

-o-transition: all 0.5s ease;

-webkit-transition: all 0.5s ease;

background: #1a1a1a;

height: 100%;

left: 220px;

margin-left: -220px;

overflow-x: hidden;

overflow-y: auto;

transition: all 0.5s ease;

width: 0;

z-index: 1000;

}

#sidebar-wrapper::-webkit-scrollbar {

display: none;

}

#page-content-wrapper {

padding-top: 70px;

width: 100%;

}

/*-------------------------------*/

/* Sidebar nav styles */

/*-------------------------------*/

.sidebar-nav {

list-style: none;

margin: 0;

padding: 0;

position: absolute;

top: 0;

width: 220px;

}

.sidebar-nav li {

display: inline-block;

line-height: 20px;

position: relative;

width: 100%;

}

.sidebar-nav li:before {

background-color: #1c1c1c;

content: '';

height: 100%;

left: 0;

position: absolute;

top: 0;

-webkit-transition: width 0.2s ease-in;

transition: width 0.2s ease-in;

width: 3px;

z-index: -1;

}

.sidebar-nav li:first-child a {

background-color: #1a1a1a;

color: #ffffff;

}

.sidebar-nav li:nth-child(2):before {

background-color: #402d5c;

}

.sidebar-nav li:nth-child(3):before {

background-color: #4c366d;

}

.sidebar-nav li:nth-child(4):before {

background-color: #583e7e;

}

.sidebar-nav li:nth-child(5):before {

background-color: #64468f;

}

.sidebar-nav li:nth-child(6):before {

background-color: #704fa0;

}

.sidebar-nav li:nth-child(7):before {

background-color: #7c5aae;

}

.sidebar-nav li:nth-child(8):before {

background-color: #8a6cb6;

}

.sidebar-nav li:nth-child(9):before {

background-color: #987dbf;

}

.sidebar-nav li:hover:before {

-webkit-transition: width 0.2s ease-in;

transition: width 0.2s ease-in;

width: 100%;

}

.sidebar-nav li a {

color: #dddddd;

display: block;

padding: 10px 15px 10px 30px;

text-decoration: none;

}

.sidebar-nav li.open:hover before {

-webkit-transition: width 0.2s ease-in;

transition: width 0.2s ease-in;

width: 100%;

}

.sidebar-nav .dropdown-menu {

background-color: #222222;

border-radius: 0;

border: none;

box-shadow: none;

margin: 0;

padding: 0;

position: relative;

width: 100%;

}

.sidebar-nav li a:hover,

.sidebar-nav li a:active,

.sidebar-nav li a:focus,

.sidebar-nav li.open a:hover,

.sidebar-nav li.open a:active,

.sidebar-nav li.open a:focus {

background-color: transparent;

color: #ffffff;

text-decoration: none;

}

.sidebar-nav > .sidebar-brand {

font-size: 20px;

height: 65px;

line-height: 44px;

}

/*-------------------------------*/

/* Hamburger-Cross */

/*-------------------------------*/

.hamburger {

background: transparent;

border: none;

display: block;

height: 32px;

margin-left: 15px;

position: fixed;

top: 20px;

width: 32px;

z-index: 999;

}

.hamburger:hover {

outline: none;

}

.hamburger:focus {

outline: none;

}

.hamburger:active {

outline: none;

}

.hamburger.is-closed:before {

-webkit-transform: translate3d(0, 0, 0);

-webkit-transition: all 0.35s ease-in-out;

color: #ffffff;

content: '';

display: block;

font-size: 14px;

line-height: 32px;

opacity: 0;

text-align: center;

width: 100px;

}

.hamburger.is-closed:hover before {

-webkit-transform: translate3d(-100px, 0, 0);

-webkit-transition: all 0.35s ease-in-out;

display: block;

opacity: 1;

}

.hamburger.is-closed:hover .hamb-top {

-webkit-transition: all 0.35s ease-in-out;

top: 0;

}

.hamburger.is-closed:hover .hamb-bottom {

-webkit-transition: all 0.35s ease-in-out;

bottom: 0;

}

.hamburger.is-closed .hamb-top {

-webkit-transition: all 0.35s ease-in-out;

background-color: rgba(255, 255, 255, 0.7);

top: 5px;

}

.hamburger.is-closed .hamb-middle {

background-color: rgba(255, 255, 255, 0.7);

margin-top: -2px;

top: 50%;

}

.hamburger.is-closed .hamb-bottom {

-webkit-transition: all 0.35s ease-in-out;

background-color: rgba(255, 255, 255, 0.7);

bottom: 5px;

}

.hamburger.is-closed .hamb-top,

.hamburger.is-closed .hamb-middle,

.hamburger.is-closed .hamb-bottom,

.hamburger.is-open .hamb-top,

.hamburger.is-open .hamb-middle,

.hamburger.is-open .hamb-bottom {

height: 4px;

left: 0;

position: absolute;

width: 100%;

}

.hamburger.is-open .hamb-top {

-webkit-transform: rotate(45deg);

-webkit-transition: -webkit-transform 0.2s cubic-bezier(0.73, 1, 0.28, 0.08);

background-color: #fff;

margin-top: -2px;

top: 50%;

}

.hamburger.is-open .hamb-middle {

background-color: #fff;

display: none;

}

.hamburger.is-open .hamb-bottom {

-webkit-transform: rotate(-45deg);

-webkit-transition: -webkit-transform 0.2s cubic-bezier(0.73, 1, 0.28, 0.08);

background-color: #fff;

margin-top: -2px;

top: 50%;

}

.hamburger.is-open:before {

-webkit-transform: translate3d(0, 0, 0);

-webkit-transition: all 0.35s ease-in-out;

color: #ffffff;

content: '';

display: block;

font-size: 14px;

line-height: 32px;

opacity: 0;

text-align: center;

width: 100px;

}

.hamburger.is-open:hover before {

-webkit-transform: translate3d(-100px, 0, 0);

-webkit-transition: all 0.35s ease-in-out;

display: block;

opacity: 1;

}

/*-------------------------------*/

/* Dark Overlay */

/*-------------------------------*/

.overlay {

position: fixed;

display: none;

width: 100%;

height: 100%;

top: 0;

left: 0;

right: 0;

bottom: 0;

background-color: rgba(0, 0, 0, 0.4);

z-index: 1;

}

/* SOME DEMO STYLES - NOT REQUIRED */

body,

html {

background-color: #583e7e;

}

body h2,

body h3,

body h4,

body h5 {

color: rgba(255, 255, 255, 0.9);

}

body p,

body blockquote {

color: rgba(255, 255, 255, 0.7);

}

body a {

color: rgba(255, 255, 255, 0.8);

text-decoration: underline;

}

body a:hover {

color: #fff;

}

</style>

www.jquery-az.com

Responsive Sidebar Navigation in CSS and jQuery

An easy-to-integrate side, vertical navigation, ideal for dashboards and admin areas.

Browser support

ie
Chrome
Firefox
Safari
Opera

Building responsive navigations for mega sites is never an easy task. If you’re working on an admin panel, chances are you’ll need to design and develop a vertical menu, with plenty of sub-categories. That’s why we decided to share today’s snippet! Our Sidebar navigation can make your life easier by providing a starting, simple template for your next project ;)

Icons: Nucleo library.

Creating the structure

The HTML structure is composed by 2 main elements: a <header> element, containing the website logo, the search form, the navigation trigger (.cd-nav-trigger – mobile version only) and the top navigation, and a <main> element containing the page main content (div.content-wrapper) and the sidebar navigation (nav.cd-side-nav).

<div>

</form>

</div>

<nav>

<ul>

<li><a href="#0">Support</a></li>

<li>

Account

</a>

<ul>

<li><a href="#0">My Account</a></li>

</ul>

</li>

</ul>

</nav>

</header>

<main>

<nav>

<ul>

<li>

<a href="#0">Overview</a>

<ul>

</ul>

</li>

<li>

<a href="#0">Notifications<span>3</span></a>

<ul>

<li><a href="#0">All Notifications</a></li>

</ul>

</li>

</ul>

</nav>

<div>

</div>

</main>

In the starting HTML structure, the .cd-search and .cd-top-nav elements are inside the <header>, while on mobile devices they are moved inside the .cd-side-nav element (more in the Events Handling section).

Adding style

We created 3 different sidebar configurations, according to the screen size.On small devices, the sidebar has a 100% width, is in absolute position and hidden by default (visibility: hidden). When the user clicks/taps the .cd-nav-trigger, the sidebar visibility is changed to visible (using the .nav-is-visible class).

.cd-side-nav {

position: absolute;

left: 0;

top: 0;

width: 100%;

visibility: hidden;

opacity: 0;

transition: opacity 0.2s 0s, visibility 0s 0.2s;

}

.cd-side-nav.nav-is-visible {

opacity: 1;

visibility: visible;

transition: opacity 0.2s 0s, visibility 0s 0s;

}

On medium size devices (viewport width more than 768px), a minified version of the sidebar is visible by default: it is in relative position, has a fixed width (110px) and a float: left so that it is on the left side of the <main> element.

@media only screen and (min-width: 768px) {

.cd-side-nav {

position: relative;

float: left;

width: 110px;

/* reset style */

visibility: visible;

opacity: 1;

}

@media only screen and (min-width: 768px) {

.cd-main-content .content-wrapper {

margin-left: 110px;

}

On bigger devices (viewport width more than 1170px), the expanded version of the sidebar is shown.

Events handling

In the starting HTML structure, the .cd-search and .cd-top-nav elements are inside the <header>.On small devices (viewport width less than 1170px), we move these elements inside the .cd-side-nav navigation.

var resizing = false;

moveNavigation();

$(window).on('resize', function(){

if( !resizing ) {

window.requestAnimationFrame(moveNavigation);

resizing = true;

}

});

function moveNavigation(){

var mq = checkMQ(); //this function returns mobile,tablet or desktop

if ( mq == 'mobile' && topNavigation.parents('.cd-side-nav').length == 0 ) { //topNavigation = $('.cd-top-nav')

detachElements();

topNavigation.appendTo(sidebar); //sidebar = $('.cd-side-nav')

searchForm.prependTo(sidebar);

} else if ( ( mq == 'tablet' || mq == 'desktop') && topNavigation.parents('.cd-side-nav').length > 0 ) {

detachElements();

searchForm.insertAfter(header.find('.cd-logo')); //header = $('.cd-main-header')

topNavigation.appendTo(header.find('.cd-nav'));

}

resizing = false;

}

function detachElements() {

topNavigation.detach();//topNavigation = $('.cd-top-nav')

searchForm.detach();//searchForm = $('.cd-search')

}

Besides, we integrated the jQuery-menu-aim plugin to differentiate between users trying hover over a sidebar item and user trying to navigate into a submenu’s contents (desktop version only).

Sep 14, 2015

Resource released by CodyHouse

Sebastiano Guerriero

UI/UX designer, with a huge passion for Nutella. Co-Founder of CodyHouse. You can follow him on Twitter or Dribbble.

Extended license

Do you want to include this resource in a product offered for sale? Buy the extended license or learn more about it.

Codyhouse newsletter

Enjoying our resources? Get our recap Email once a month with all of the lastest news.

codyhouse.co

<div>

<ul>

<li><a href="#dropdowns"><i></i> Dropdowns</a></li>

<li><a href="#buttonGroups"><i></i> Button groups</a></li>

<li><a href="#buttonDropdowns"><i></i> Button dropdowns</a></li>

<li><a href="#navbar"><i></i> Navbar</a></li>

<li><a href="#breadcrumbs"><i></i> Breadcrumbs</a></li>

<li><a href="#pagination"><i></i> Pagination</a></li>

<li><a href="#labels-badges"><i></i> Labels and badges</a></li>

<li><a href="#typography"><i></i> Typography</a></li>

<li><a href="#thumbnails"><i></i> Thumbnails</a></li>

<li><a href="#alerts"><i></i> Alerts</a></li>

<li><a href="#progress"><i></i> Progress bars</a></li>

<li><a href="#media"><i></i> Media object</a></li>

</ul>

</div>

<div>

<ul>

<i></i>dany

</a>

<ul>

</ul>

</li>

</ul>

</div>

<div>

<ul>

<li><a href="#approval"></i>Approval Requests</a></li>

<li><a href="#setting"></i>Settings</a></li>

</ul>

</div>

<div>

<ul>

<i></i>dany

</a>

<ul>

</ul>

</li>

</ul>

<ul>

<li><a href="#approval"></i>Approval Requests</a></li>

<li><a href="#setting"></i>Settings</a></li>

</ul>

</div>

pastebin.com

Responsive Sidebar Navigation with JavaScript and CSS3

Author: Views Total: Official Page: Last Update: License:

cbfranca

5,054

Go to website

April 27, 2015

MIT

Preview:

Description:

Vertical Responsive Menu is a small JavaScript library which helps you create a mobile-friendly, fully responsive and space-saving sidebar navigation for your web projects. On small screens, it will converts the sidebar navigation into an off-canvas menu with a toggle icon when the viewport’s size reaches the breakpoint specified in the CSS3 media queries (default to 992px).

How to use it:

Load the required vertical-responsive-menu.min.css stylesheet and the vertical-responsive-menu.min.js script in your project.

Create a nested nav list for the multilevel sidebar navigation as follow:

<nav> <ul> <li> <label title="Item 1"> <imenu--label">Item 1</span> </label> <ul> <li> <a href="#">Submenu</a> </li> <li> <a href="#">Submenu</a> </li> <li> <a href="#">Submenu</a> </li> </ul> </li> <li> <a href="#" title="Item 2"> <i></i> <span>Item 2</span> </a> </li> <li> <a href="#" title="Item 3"> <i></i> <span>Item 3</span> </a> </li> <li> <label title="Item 4"> <i></i> <span>Item 4</span> </label> <ul> <li> <a href="#">Submenu</a> </li> <li> <a href="#">Submenu</a> </li> <li> <a href="#">Submenu</a> </li> </ul> </li> <li> <a href="#" title="Item 5"> <i></i> <span>Item 5</span> </a> </li> </ul> <button> <i></i> <span>Recolher menu</span> </button> </nav>

You can change the breakpoint whatever you like in the CSS.

@media (min-width: 992px) { ... }